<template>
	<div>
		<el-table :data="Borrowlist" border stripe>
			<el-table-column label="#" type="index"></el-table-column>
			<el-table-column label="书号" prop="bookid"></el-table-column>
			<el-table-column label="借阅人" prop="people"></el-table-column>
			<el-table-column label="借书时间">
				<template slot-scope='scope'>
					<el-date-picker style="width: 150px;" v-model="scope.row.jtime" type="date" readonly="true">
					</el-date-picker>
				</template>
			</el-table-column>
			<el-table-column label="还书时间">
				<template slot-scope='scope'>
					<el-date-picker style="width: 150px;" v-model="scope.row.htime" type="date" readonly="true">
					</el-date-picker>
				</template>
			</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			
	</div>
	
</template>

<script>
	export default {
	    data() {
	      return {
			   total:0,
			  Borrowlist:[],
			  queryInfo: {
			  	query: sessionStorage.getItem("username"),
			  	pagenum: 1,
			  	pagesize: 2
			  }
	      }
	    },
		methods:{
			getUserList() {
				 console.log(this.queryInfo.query);
				this.$http.post("http://localhost:8989/reder/find", this.queryInfo).then(res => {
					console.log(res);
					if (res.data.status !== 200) return this.$message.success("您暂时没有借书哦");
					this.Borrowlist = res.data.data.list;
					console.log(this.Borrowlist);
					this.total = res.data.total;
					console.log(this.total);
				}).catch(e => {
					console.log(e);
				})
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.queryInfo.pagesize = newSize;
				this.getUserList();
			},
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.queryInfo.pagenum = newPage;
				this.getUserList();
			}
		},
		created(){
			this.getUserList();
		}
	  }
</script>

<style>
</style>
